<template>
  <div class="order-detail-drawer" :class="{ 'open': visible }">
    <div class="drawer-backdrop" @click="closeDrawer"></div>
    <div class="drawer-content">
      <div class="drawer-header">
        <h3>订单详情</h3>
        <button class="close-btn" @click="closeDrawer">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="drawer-body" v-if="order">
        <!-- 订单基本信息 -->
        <div class="section">
          <h4 class="section-title">订单信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">订单号</span>
              <span class="value">{{ order.orderNumber }}</span>
            </div>
            <div class="info-item">
              <span class="label">下单时间</span>
              <span class="value">{{ order.orderTime }}</span>
            </div>
            <div class="info-item">
              <span class="label">订单状态</span>
              <span :class="['status-badge', `status-${order.status}`]">
                {{ getStatusText(order.status) }}
              </span>
            </div>
            <div class="info-item">
              <span class="label">支付方式</span>
              <span class="value">{{ order.paymentMethod || '暂无' }}</span>
            </div>
          </div>
        </div>

        <!-- 商品信息 -->
        <div class="section">
          <h4 class="section-title">商品明细</h4>
          <div class="product-list">
            <div class="product-item" v-for="(product, index) in order.products" :key="index">
              <div class="product-image">
                <img :src="product.image" :alt="product.name">
              </div>
              <div class="product-details">
                <div class="product-name">{{ product.name }}</div>
                <div class="product-specs">{{ product.specs || '默认规格' }}</div>
              </div>
              <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
              <div class="product-quantity">x{{ product.quantity }}</div>
              <div class="product-total">¥{{ (product.price * product.quantity).toFixed(2) }}</div>
            </div>
          </div>
          
          <div class="order-totals">
            <div class="total-item">
              <span class="label">商品总额</span>
              <span class="value">¥{{ order.subtotal.toFixed(2) }}</span>
            </div>
            <div class="total-item" v-if="order.discount">
              <span class="label">优惠金额</span>
              <span class="value">-¥{{ order.discount.toFixed(2) }}</span>
            </div>
            <div class="total-item" v-if="order.shippingFee">
              <span class="label">配送费</span>
              <span class="value">¥{{ order.shippingFee.toFixed(2) }}</span>
            </div>
            <div class="total-item final-total">
              <span class="label">订单总额</span>
              <span class="value">¥{{ order.total.toFixed(2) }}</span>
            </div>
          </div>
        </div>

        <!-- 客户信息 -->
        <div class="section">
          <h4 class="section-title">客户信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">客户名称</span>
              <span class="value">{{ order.customer.name }}</span>
            </div>
            <div class="info-item">
              <span class="label">联系电话</span>
              <span class="value">{{ order.customer.phone }}</span>
            </div>
            <div class="info-item full-width">
              <span class="label">收货地址</span>
              <span class="value">{{ order.customer.address }}</span>
            </div>
            <div class="info-item full-width" v-if="order.customer.remark">
              <span class="label">备注</span>
              <span class="value">{{ order.customer.remark }}</span>
            </div>
          </div>
        </div>

        <!-- 分销商和佣金信息 -->
        <div class="section">
          <h4 class="section-title">分销与佣金信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">所属分销商</span>
              <div class="distributor-info">
                <img :src="order.distributor.avatar" :alt="order.distributor.name" class="distributor-avatar">
                <span>{{ order.distributor.name }}</span>
              </div>
            </div>
            <div class="info-item">
              <span class="label">佣金金额</span>
              <span class="value commission">¥{{ order.commission.amount.toFixed(2) }}</span>
            </div>
            <div class="info-item">
              <span class="label">佣金比例</span>
              <span class="value">{{ order.commission.rate }}%</span>
            </div>
            <div class="info-item">
              <span class="label">佣金状态</span>
              <span :class="['commission-status', `status-${order.commission.status}`]">
                {{ getCommissionStatusText(order.commission.status) }}
              </span>
            </div>
            <div class="info-item" v-if="order.commission.settledTime">
              <span class="label">结算时间</span>
              <span class="value">{{ order.commission.settledTime }}</span>
            </div>
          </div>
        </div>
        
        <!-- 订单日志 -->
        <div class="section">
          <h4 class="section-title">订单日志</h4>
          <div class="order-timeline">
            <div class="timeline-item" v-for="(log, index) in order.logs" :key="index">
              <div class="timeline-icon" :class="`status-${log.type}`">
                <i :class="`fas ${getLogIcon(log.type)}`"></i>
              </div>
              <div class="timeline-content">
                <div class="timeline-time">{{ log.time }}</div>
                <div class="timeline-text">{{ log.message }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="drawer-footer" v-if="order">
        <button class="btn btn-secondary" @click="closeDrawer">关闭</button>
        <button class="btn btn-primary" @click="printOrder" v-if="order.status !== 'cancelled'">
          <i class="fas fa-print"></i> 打印订单
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

// 定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  order: {
    type: Object,
    default: null
  }
});

// 定义事件
const emit = defineEmits(['update:visible', 'close']);

// 关闭抽屉
const closeDrawer = () => {
  emit('update:visible', false);
  emit('close');
};

// 打印订单
const printOrder = () => {
  window.print();
};

// 获取状态文本
const getStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    'pending': '待付款',
    'paid': '已付款',
    'shipping': '配送中',
    'completed': '已完成',
    'cancelled': '已取消'
  };
  return statusMap[status] || status;
};

// 获取佣金状态文本
const getCommissionStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    'pending': '待结算',
    'settled': '已结算',
    'cancelled': '已取消'
  };
  return statusMap[status] || status;
};

// 获取日志图标
const getLogIcon = (type: string): string => {
  const iconMap: Record<string, string> = {
    'created': 'fa-file-alt',
    'paid': 'fa-credit-card',
    'shipping': 'fa-truck',
    'completed': 'fa-check-circle',
    'cancelled': 'fa-times-circle',
    'commission': 'fa-money-bill-wave'
  };
  return iconMap[type] || 'fa-circle';
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.order-detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  pointer-events: none;
  transition: visibility 0.3s ease;
  visibility: hidden;

  &.open {
    visibility: visible;
    pointer-events: auto;

    .drawer-backdrop {
      opacity: 1;
    }

    .drawer-content {
      transform: translateX(0);
    }
  }
}

.drawer-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drawer-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  max-width: 90%;
  height: 100%;
  background-color: white;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid $gray-200;

  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
  }

  .close-btn {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    color: $text-secondary;
    
    &:hover {
      background-color: $gray-100;
      color: $text-primary;
    }
  }
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid $gray-200;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid $gray-200;

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: $text-primary;
  margin: 0 0 16px 0;
  position: relative;
  padding-left: 12px;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    height: 14px;
    width: 4px;
    background-color: $primary;
    border-radius: 2px;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  &.full-width {
    grid-column: 1 / -1;
  }

  .label {
    display: block;
    font-size: 13px;
    color: $text-secondary;
    margin-bottom: 4px;
  }

  .value {
    font-size: 15px;
    color: $text-primary;
    font-weight: 500;
  }
}

.distributor-info {
  display: flex;
  align-items: center;
  gap: 8px;

  .distributor-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  
  &.status-pending {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
  }
  
  &.status-paid {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
  }
  
  &.status-shipping {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
  }
  
  &.status-completed {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }
  
  &.status-cancelled {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }
}

.commission-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  
  &.status-pending {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
  }
  
  &.status-settled {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }
  
  &.status-cancelled {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }
}

.product-list {
  margin-bottom: 20px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid $gray-100;
  
  &:last-child {
    border-bottom: none;
  }
  
  .product-image {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 12px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .product-details {
    flex: 1;
    
    .product-name {
      font-size: 14px;
      color: $text-primary;
      margin-bottom: 4px;
    }
    
    .product-specs {
      font-size: 12px;
      color: $text-secondary;
    }
  }
  
  .product-price,
  .product-quantity,
  .product-total {
    font-size: 14px;
    padding: 0 8px;
    text-align: right;
    min-width: 80px;
  }
  
  .product-total {
    font-weight: 600;
    color: $text-primary;
  }
}

.order-totals {
  background-color: $gray-50;
  padding: 16px;
  border-radius: 8px;
  
  .total-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      color: $text-secondary;
      font-size: 14px;
    }
    
    .value {
      font-size: 14px;
      font-weight: 500;
      color: $text-primary;
    }
    
    &.final-total {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed $gray-200;
      
      .label, .value {
        font-size: 16px;
        font-weight: 600;
        color: $primary;
      }
    }
  }
}

.value.commission {
  color: $success;
  font-weight: 600;
}

.order-timeline {
  position: relative;
  padding-left: 32px;
  
  &:before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: $gray-200;
  }
  
  .timeline-item {
    position: relative;
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .timeline-icon {
    position: absolute;
    left: -32px;
    top: 0;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $gray-500;
    border: 2px solid $gray-200;
    
    &.status-created {
      color: #3b82f6;
      border-color: #3b82f6;
    }
    
    &.status-paid {
      color: #8b5cf6;
      border-color: #8b5cf6;
    }
    
    &.status-shipping {
      color: #f59e0b;
      border-color: #f59e0b;
    }
    
    &.status-completed {
      color: #10b981;
      border-color: #10b981;
    }
    
    &.status-cancelled {
      color: #ef4444;
      border-color: #ef4444;
    }
    
    &.status-commission {
      color: #059669;
      border-color: #059669;
    }
  }
  
  .timeline-content {
    background-color: $gray-50;
    border-radius: 8px;
    padding: 12px 16px;
    
    .timeline-time {
      font-size: 12px;
      color: $text-secondary;
      margin-bottom: 4px;
    }
    
    .timeline-text {
      font-size: 14px;
      color: $text-primary;
    }
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  
  &.btn-primary {
    background-color: $primary;
    color: white;
    border: none;
    
    &:hover {
      background-color: darken($primary, 5%);
    }
  }
  
  &.btn-secondary {
    background-color: white;
    color: $text-secondary;
    border: 1px solid $gray-300;
    
    &:hover {
      background-color: $gray-100;
      color: $text-primary;
    }
  }
}

@media (max-width: 768px) {
  .drawer-content {
    width: 100%;
    max-width: 100%;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .product-item {
    flex-wrap: wrap;
    
    .product-image {
      margin-bottom: 8px;
    }
    
    .product-details {
      width: calc(100% - 72px);
      margin-bottom: 8px;
    }
    
    .product-price,
    .product-quantity,
    .product-total {
      margin-top: 8px;
    }
    
    .product-price {
      flex: 1;
      text-align: left;
    }
  }
}
</style> 